<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>移动</title>
		<style>
			#big{
				top: 40px;
				left: 0;
				width: 500px;
				height: 500px;
				background: yellow;
				
				position: absolute;
				z-index:-1;
			}
			#small {
				top: 40px;
				left: 0;
				width: 50px;
				height: 50px;
				background: red;
				
				position: absolute;
			}
			
		</style>
	</head>

	<body>
		<input type="button" value="点击" onclick="start()" />
		<div id="small"></div>
		<div id="big"></div>
		<script>
			var big=document.getElementById('big');
			var small = document.getElementById('small');
			var x=0;
			var y=40;
			function start() {
				setInterval(time,500);
			}
			function time(){
				if(x<450){
					x=x+50;
					y=y+50;
					small.style.left = x + 'px';
				    small.style.top = y + 'px';
				}
			}
		</script>
	</body>

</html>